<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ name: 'teacherbanji' }">添加班级</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="new-box">
            <el-button type="danger"  @click="showDialog">新增班级</el-button>
        </div>

        <el-table
            
            :data="banjiList"
            style="width:100%;margin-top:20px; "
             :row-class-name="tableRowClassName"
        >
        <el-table-column label="序号"  type="index">
            
        </el-table-column>
        <el-table-column
            label="名称"
            prop="bjname"
        >
        </el-table-column>
            <el-table-column
            label="编号"
        >
            <template slot-scope="scope">
                <el-tag  effect="dark" type="success"> {{scope.row.bjid}}</el-tag>
            </template>
        </el-table-column>
            <el-table-column label="操作">
            <template slot-scope="scope">
                <el-popconfirm
                    confirmButtonText='好的'
                    cancelButtonText='不用了'
                    icon="el-icon-info"
                    iconColor="red"
                    title="这个操作很危险哦,真的要删除"
                    @onConfirm="deleteItem(scope.row._id)"
                    >
                    <el-button slot="reference" type="danger" size="small" >删除</el-button>
                    </el-popconfirm>
            </template>
            </el-table-column>
        </el-table>

        <el-dialog
            title="新增学科"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <el-cascader :options="options" @change="getLabel" v-model="youbanji" clearable></el-cascader>

        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">暂不新增</el-button>
            <el-button type="primary" @click="addBanji">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>


<script>
const BanNum = [{
    value:2001,
    label:2001
},{
    value:2002,
    label:2002
},{
    value:2003,
    label:2003
},{
    value:2004,
    label:2004
},{
    value:2005,
    label:2005
},{
    value:2006,
    label:2006
},{
    value:2007,
    label:2007
},{
    value:2008,
    label:2008
},{
    value:2009,
    label:2009
},{
    value:2010,
    label:2010
}];
export default {
    data(){
        return {
            dialogVisible:false,
            options:[],
            xuekeList:[],
            BanNum,
            youbanji:"",
            xuekeLabel:[],
            schoolLabel:[],
            banjiList:[]
        }
    },
    methods:{

         tableRowClassName({row, rowIndex}) {
            if (rowIndex % 2 == 0) {
            return 'warning-row';
            } else   {
            return 'success-row';
            }
            return '';
        },

        deleteItem(_id){
            this.$axios.post("/vue/delbanji",{
                _id
            })
            .then(res=>{
                if(res.data.type){
                    this.banjiList = this.banjiList.filter(item=>item._id!==_id);
                }
            })
        },
        getbanjilist(){
            this.$axios.post("/vue/getbanjilist")
            .then(res=>{
                if(res.data.type){
                    this.banjiList = res.data.result;
                }
            })
        },
        addBanji(){
            // console.log(this.youbanji);
            var value = this.youbanji.join("/")
            
            // var label = 
            var schname = "";
            var xuename = "";

            this.schoolLabel.forEach(item=>{
                if(item.schid==this.youbanji[0]){
                    schname = item.schname;
                }
            })
            this.xuekeLabel.forEach(item=>{
                if(item.xkid==this.youbanji[1]){
                    xuename = item.xkname;
                }
            })
            var label = schname+xuename+this.youbanji[2];

            this.$axios.post("/vue/addbanji",{
                bjid:value,
                bjname:label,
                sch:this.youbanji[0],
                xk:this.youbanji[1],
                num:this.youbanji[2]
            }).then(res=>{
                if(res.data.type){
                     this.dialogVisible = false;
                     this.getbanjilist();
                }
            })
            
        },
        getLabel(value){
            console.log(value);
            // this.options = this.options.map(item=>{
                
            // })
        },
        handleClose(){
            this.dialogVisible = false;
        },
        showDialog(){
            this.dialogVisible  = true;
            this.$axios.post("/vue/getschool")
            .then(res=>{
                this.schoolLabel = res.data.result;
                this.options = res.data.result.map((item=>{
                     item.value = item.schid;
                     item.label = item.schname;
                     item.children = this.xuekeList;
                     
                     return item;
                }))
            })
        }
    },

    mounted(){
        this.$axios.post("/vue/getxueke")
        .then(res=>{
            this.xuekeLabel = res.data.result;
            this.xuekeList = res.data.result.map((item=>{
                item.value = item.xkid;
                item.label = item.xkname;
                item.children  = this.BanNum;
                return item;
            }))
        })

        this.getbanjilist();
    }   
}
</script>

